שליטה ב-React Portals: רינדור קומפוננטות מחוץ להיררכיית ה-DOM

בנוף העצום של פיתוח הרשת המודרני, React העצימה אינספור מפתחים ברחבי העולם לבנות ממשקי משתמש דינמיים ואינטראקטיביים במיוחד. הארכיטקטורה מבוססת הקומפוננטות שלה מפשטת מבני UI מורכבים, ומקדמת שימוש חוזר ותחזוקתיות. עם זאת, גם עם העיצוב האלגנטי של React, מפתחים נתקלים מדי פעם בתרחישים שבהם גישת רינדור הקומפוננטות הסטנדרטית – שבה קומפוננטות מרנדרות את הפלט שלהן כילדים בתוך אלמנט ה-DOM של ההורה שלהן – מציגה מגבלות משמעותיות.

חשבו על דיאלוג מודאלי שצריך להופיע מעל כל התוכן האחר, באנר התראות שצף באופן גלובלי, או תפריט הקשר שחייב לחרוג מגבולות קונטיינר אב גולש. במצבים אלה, הגישה המקובלת של רינדור קומפוננטות ישירות בתוך היררכיית ה-DOM של ההורה שלהן עלולה להוביל לאתגרים בעיצוב (כמו התנגשויות z-index), בעיות פריסה ומורכבויות בהפצת אירועים. זה בדיוק המקום שבו React Portals נכנסים לתמונה ככלי רב עוצמה וחיוני בארסנל של מפתח React.

מדריך מקיף זה צולל לעומק דפוס ה-React Portal, בוחן את מושגי היסוד שלו, יישומים מעשיים, שיקולים מתקדמים ושיטות עבודה מומלצות. בין אם אתם מפתחי React ותיקים או רק מתחילים את דרככם, הבנת הפורטלים תפתח אפשרויות חדשות לבניית חוויות משתמש חזקות ונגישות באמת באופן גלובלי.

הבנת אתגר הליבה: מגבלות היררכיית ה-DOM

קומפוננטות React, כברירת מחדל, מרנדרות את הפלט שלהן לתוך צומת ה-DOM של קומפוננטת האב שלהן. זה יוצר מיפוי ישיר בין עץ הקומפוננטות של React לבין עץ ה-DOM של הדפדפן. בעוד שיחס זה הוא אינטואיטיבי ובדרך כלל מועיל, הוא יכול להפוך למכשול כאשר הייצוג החזותי של קומפוננטה צריך להשתחרר ממגבלות ההורה שלה.

תרחישים נפוצים ונקודות הכאב שלהם:

• מודאלים, דיאלוגים ו-Lightboxes: אלמנטים אלה בדרך כלל צריכים לכסות את כל האפליקציה, ללא קשר למקום שבו הם מוגדרים בעץ הקומפוננטות. אם מודאל מקונן עמוק, ה-`z-index` שלו ב-CSS עלול להיות מוגבל על ידי אבותיו, מה שמקשה להבטיח שהוא תמיד יופיע למעלה. יתר על כן, `overflow: hidden` על אלמנט אב יכול לחתוך חלקים מהמודאל.
• טולטיפים ו-Popovers: בדומה למודאלים, טולטיפים או popovers צריכים לעיתים קרובות למקם את עצמם ביחס לאלמנט אך להופיע מחוץ לגבולות ההורה שעשוי להיות מוגבל. `overflow: hidden` על אב עלול לקטוע טולטיפ.
• התראות והודעות Toast: הודעות גלובליות אלו מופיעות לעיתים קרובות בחלק העליון או התחתון של אזור התצוגה (viewport), ודורשות רינדור בלתי תלוי בקומפוננטה שהפעילה אותן.
• תפריטי הקשר: תפריטי קליק-ימני או תפריטי הקשר מותאמים אישית צריכים להופיע בדיוק במקום שבו המשתמש לחץ, ולעיתים קרובות פורצים מתוך קונטיינרים הוריים מוגבלים כדי להבטיח נראות מלאה.
• אינטגרציות עם צד שלישי: לפעמים, ייתכן שתצטרכו לרנדר קומפוננטת React לתוך צומת DOM המנוהל על ידי ספרייה חיצונית או קוד ישן, מחוץ לשורש של React.

בכל אחד מהתרחישים הללו, ניסיון להשיג את התוצאה החזותית הרצויה באמצעות רינדור React סטנדרטי בלבד מוביל לעיתים קרובות ל-CSS מסורבל, ערכי `z-index` מוגזמים, או לוגיקת מיקום מורכבת שקשה לתחזק ולהרחיב. כאן React Portals מציעים פתרון נקי ואידיומטי.

מהו בדיוק React Portal?

React Portal מספק דרך מהשורה הראשונה לרנדר ילדים לתוך צומת DOM שקיים מחוץ להיררכיית ה-DOM של קומפוננטת האב. למרות הרינדור לאלמנט DOM פיזי אחר, התוכן של הפורטל עדיין מתנהג כאילו היה ילד ישיר בעץ הקומפוננטות של React. זה אומר שהוא שומר על אותו קונטקסט של React (למשל, ערכי Context API) ומשתתף במערכת ה-event bubbling של React.

הליבה של React Portals טמונה במתודה `ReactDOM.createPortal()`. החתימה שלה פשוטה:

ReactDOM.createPortal(child, container)

• child: כל ילד React שניתן לרנדר, כגון אלמנט, מחרוזת, או fragment.
• container: אלמנט DOM שכבר קיים במסמך. זהו צומת ה-DOM היעד שאליו ה-`child` ירונדר.

כאשר אתם משתמשים ב-`ReactDOM.createPortal()`, ריאקט יוצר תת-עץ DOM וירטואלי חדש תחת צומת ה-DOM שצוין ב-`container`. עם זאת, תת-עץ חדש זה עדיין מחובר לוגית לקומפוננטה שיצרה את הפורטל. "חיבור לוגי" זה הוא המפתח להבנת הסיבה לכך ש-event bubbling ו-context עובדים כמצופה.

הקמת ה-React Portal הראשון שלכם: דוגמת מודאל פשוטה

בואו נעבור על מקרה שימוש נפוץ: יצירת דיאלוג מודאלי. כדי ליישם פורטל, אתם צריכים קודם כל אלמנט DOM יעד בקובץ `index.html` שלכם (או בכל מקום שבו נמצא קובץ ה-HTML השורשי של האפליקציה) שאליו ירונדר תוכן הפורטל.

שלב 1: הכנת צומת ה-DOM היעד

פתחו את קובץ `public/index.html` שלכם (או מקבילו) והוסיפו אלמנט `div` חדש. נהוג להוסיף אותו ממש לפני תג הסגירה של `body`, מחוץ לשורש הראשי של אפליקציית ה-React שלכם.

            
<body>
  <!-- Your main React app root -->
  <div id="root"></div>

  <!-- This is where our portal content will render -->
  <div id="modal-root"></div>
</body>

            

              
                Copy
              
            
          

שלב 2: יצירת קומפוננטת הפורטל

כעת, בואו ניצור קומפוננטת מודאל פשוטה המשתמשת בפורטל.

            
// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Append the div to the modal root when the component mounts
    modalRoot.appendChild(el.current);

    // Clean up: remove the div when the component unmounts
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Empty dependency array means this runs once on mount and once on unmount

  if (!isOpen) {
    return null; // Don't render anything if the modal is not open
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // Ensure it's on top
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Close Modal</button>
      </div>
    </div>,
    el.current // Render the modal content into our created div, which is inside modalRoot
  );
};

export default Modal;

            

              
                Copy
              
            
          

בדוגמה זו, אנו יוצרים אלמנט `div` חדש עבור כל מופע של מודאל (`el.current`) ומצרפים אותו ל-`modal-root`. זה מאפשר לנו לנהל מספר מודאלים במידת הצורך מבלי שהם יפריעו למחזור החיים או לתוכן אחד של השני. תוכן המודאל בפועל (השכבה העליונה והקופסה הלבנה) מרונדר לאחר מכן לתוך `el.current` זה באמצעות `ReactDOM.createPortal`.

שלב 3: שימוש בקומפוננטת המודאל

            
// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Assuming Modal.js is in the same directory

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>React Portal Example</h1>
      <p>This content is part of the main application tree.</p>
      <button onClick={handleOpenModal}>Open Global Modal</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Greetings from the Portal!</h3>
        <p>This modal content is rendered outside the 'root' div, but still managed by React.</p>
      </Modal>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

למרות שקומפוננטת ה-`Modal` מרונדרת בתוך קומפוננטת `App` (שבעצמה נמצאת בתוך ה-`div` עם `id="root"`), הפלט ה-DOM الفعلي שלה מופיע בתוך ה-`div` עם `id="modal-root"`. זה מבטיח שהמודאל מכסה הכל ללא בעיות `z-index` או `overflow`, תוך שהוא עדיין נהנה מניהול המצב ומחזור החיים של קומפוננטות React.

מקרי שימוש מרכזיים ויישומים מתקדמים של React Portals

בעוד שמודאלים הם דוגמה מהותית, התועלת של React Portals משתרעת הרבה מעבר לחלונות קופצים פשוטים. בואו נחקור תרחישים מתקדמים יותר שבהם פורטלים מספקים פתרונות אלגנטיים.

1. מערכות מודאלים ודיאלוגים חזקות

כפי שראינו, פורטלים מפשטים את יישום המודאלים. יתרונות מרכזיים כוללים:

• Z-Index מובטח: על ידי רינדור ברמת ה-`body` (או קונטיינר ייעודי ברמה גבוהה), מודאלים יכולים תמיד להשיג את ה-`z-index` הגבוה ביותר מבלי להיאבק עם הקשרי CSS מקוננים עמוק. זה מבטיח שהם יופיעו באופן עקבי מעל כל תוכן אחר, ללא קשר לקומפוננטה שהפעילה אותם.
• הימלטות מ-Overflow: הורים עם `overflow: hidden` או `overflow: auto` לא יחתכו עוד את תוכן המודאל. זה חיוני עבור מודאלים גדולים או כאלה עם תוכן דינמי.
• נגישות (A11y): פורטלים הם יסוד לבניית מודאלים נגישים. למרות שמבנה ה-DOM נפרד, החיבור הלוגי לעץ React מאפשר ניהול פוקוס תקין (לכידת פוקוס בתוך המודאל) והחלת תכונות ARIA (כמו `aria-modal`) בצורה נכונה. ספריות כמו `react-focus-lock` או `@reach/dialog` ממנפות פורטלים בהרחבה למטרה זו.

2. טולטיפים, פופאוברים ותפריטים נפתחים דינמיים

בדומה למודאלים, אלמנטים אלה צריכים לעיתים קרובות להופיע בסמוך לאלמנט מפעיל אך גם לפרוץ מפריסות הורה מוגבלות.

• מיקום מדויק: ניתן לחשב את מיקום האלמנט המפעיל ביחס ל-viewport ואז למקם את הטולטיפ באופן אבסולוטי באמצעות JavaScript. רינדור שלו דרך פורטל מבטיח שהוא לא ייחתך על ידי מאפיין `overflow` על כל הורה בדרך.
• מניעת תזוזות בפריסה (Layout Shifts): אם טולטיפ היה מרונדר בתוך השורה, נוכחותו עלולה לגרום לתזוזות בפריסה של ההורה שלו. פורטלים מבודדים את הרינדור שלו, ומונעים זרימות מחדש (reflows) לא רצויות.

3. התראות גלובליות והודעות Toast

אפליקציות דורשות לעיתים קרובות מערכת להצגת הודעות ארעיות ולא חוסמות (למשל, "פריט נוסף לעגלה!", "חיבור רשת אבד").

• ניהול מרכזי: קומפוננטת "ToastProvider" יחידה יכולה לנהל תור של הודעות toast. ספק זה יכול להשתמש בפורטל כדי לרנדר את כל ההודעות לתוך `div` ייעודי בחלק העליון או התחתון של ה-`body`, מה שמבטיח שהן תמיד נראות ומעוצבות באופן עקבי, ללא קשר למקום באפליקציה שבו הופעלה ההודעה.
• עקביות: מבטיח שכל ההתראות באפליקציה מורכבת נראות ומתנהגות באופן אחיד.

4. תפריטי הקשר מותאמים אישית

כאשר משתמש לוחץ קליק-ימני על אלמנט, לעיתים קרובות מופיע תפריט הקשר. תפריט זה צריך להיות ממוקם בדיוק במיקום הסמן ולכסות את כל התוכן האחר. פורטלים הם אידיאליים כאן:

• ניתן לרנדר את קומפוננטת התפריט דרך פורטל, ולקבל את קואורדינטות הלחיצה.
• היא תופיע בדיוק היכן שצריך, ללא הגבלה על ידי היררכיית ההורה של האלמנט שעליו לחצו.

5. אינטגרציה עם ספריות צד שלישי או אלמנטי DOM שאינם של React

דמיינו שיש לכם אפליקציה קיימת שבה חלק מה-UI מנוהל על ידי ספריית JavaScript ישנה, או אולי פתרון מיפוי מותאם אישית המשתמש בצמתי DOM משלו. אם תרצו לרנדר קומפוננטת React קטנה ואינטראקטיבית בתוך צומת DOM חיצוני כזה, `ReactDOM.createPortal` הוא הגשר שלכם.

• ניתן ליצור צומת DOM יעד בתוך האזור הנשלט על ידי צד שלישי.
• לאחר מכן, להשתמש בקומפוננטת React עם פורטל כדי להזריק את ה-UI של React שלכם לתוך צומת ה-DOM הספציפי הזה, מה שמאפשר לכוח ההצהרתי של React לשפר חלקים שאינם React באפליקציה שלכם.

שיקולים מתקדמים בעת שימוש ב-React Portals

בעוד שפורטלים פותרים בעיות רינדור מורכבות, חיוני להבין כיצד הם מתקשרים עם תכונות אחרות של React ועם ה-DOM כדי למנף אותם ביעילות ולהימנע ממלכודות נפוצות.

1. Event Bubbling: הבחנה מכרעת

אחד ההיבטים החזקים ביותר ולעיתים קרובות לא מובנים של React Portals הוא התנהגותם לגבי event bubbling. למרות שהם מרונדרים לצומת DOM שונה לחלוטין, אירועים שנורים מאלמנטים בתוך פורטל עדיין יבעבעו למעלה דרך עץ הקומפוננטות של React כאילו לא היה קיים פורטל. הסיבה לכך היא שמערכת האירועים של React היא סינתטית ועובדת באופן עצמאי מבעבוע האירועים המקורי של ה-DOM ברוב המקרים.

• מה זה אומר: אם יש לכם כפתור בתוך פורטל, ואירוע הלחיצה של אותו כפתור מבעבע למעלה, הוא יפעיל כל `onClick` handler על קומפוננטות האב הלוגיות שלו בעץ React, ולא על אב ה-DOM שלו.
• דוגמה: אם קומפוננטת ה-`Modal` שלכם מרונדרת על ידי `App`, לחיצה בתוך ה-`Modal` תבעבע למעלה למטפלי האירועים של `App` אם הוגדרו כך. זה מועיל מאוד מכיוון שהוא שומר על זרימת האירועים האינטואיטיבית שהייתם מצפים לה ב-React.
• אירועי DOM מקוריים: אם תחברו מאזיני אירועי DOM מקוריים ישירות (למשל, באמצעות `addEventListener` על `document.body`), אלה יעקבו אחר עץ ה-DOM המקורי. עם זאת, עבור אירועים סינתטיים סטנדרטיים של React (`onClick`, `onChange`, וכו'), העץ הלוגי של React גובר.

2. Context API ופורטלים

ה-Context API הוא המנגנון של React לשיתוף ערכים (כמו ערכות נושא, סטטוס אימות משתמש) על פני עץ הקומפוננטות ללא prop-drilling. למרבה המזל, Context עובד בצורה חלקה עם פורטלים.

• לקומפוננטה המרונדרת דרך פורטל עדיין תהיה גישה לספקי קונטקסט שהם אבות בעץ הקומפוננטות הלוגי שלה ב-React.
• זה אומר שאתם יכולים לקבל `ThemeProvider` בראש קומפוננטת ה-`App` שלכם, ומודאל המרונדר דרך פורטל עדיין יירש את קונטקסט ערכת הנושא הזה, מה שמפשט עיצוב גלובלי וניהול מצב עבור תוכן הפורטל.

3. נגישות (A11y) עם פורטלים

בניית ממשקי משתמש נגישים היא חיונית עבור קהלים גלובליים, ופורטלים מציגים שיקולי נגישות ספציפיים, במיוחד עבור מודאלים ודיאלוגים.

• ניהול פוקוס: כאשר מודאל נפתח, הפוקוס צריך להיות לכוד בתוך המודאל כדי למנוע ממשתמשים (במיוחד משתמשי מקלדת וקוראי מסך) לקיים אינטראקציה עם אלמנטים מאחוריו. כאשר המודאל נסגר, הפוקוס צריך לחזור לאלמנט שהפעיל אותו. זה דורש לעיתים קרובות ניהול JavaScript קפדני (למשל, שימוש ב-`useRef` לניהול אלמנטים ניתנים למיקוד, או ספרייה ייעודית כמו `react-focus-lock`).
• ניווט במקלדת: ודאו שמקש `Esc` סוגר את המודאל ומקש `Tab` מעביר את הפוקוס רק בתוך המודאל.
• תכונות ARIA: השתמשו נכון בתפקידים ומאפיינים של ARIA, כגון `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, ו-`aria-describedby` על תוכן הפורטל שלכם כדי להעביר את מטרתו ומבנהו לטכנולוגיות מסייעות.

4. אתגרי עיצוב ופתרונות

בעוד שפורטלים פותרים בעיות היררכיית DOM, הם לא פותרים באורח פלא את כל מורכבויות העיצוב.

• סגנונות גלובליים לעומת ממוקדים (Scoped): מכיוון שתוכן הפורטל מרונדר לצומת DOM נגיש גלובלית (כמו `body` או `modal-root`), כל כללי CSS גלובליים עלולים להשפיע עליו.
• CSS-in-JS ו-CSS Modules: פתרונות אלה יכולים לעזור לכמוס סגנונות ולמנוע דליפות לא רצויות, מה שהופך אותם לשימושיים במיוחד בעת עיצוב תוכן פורטל. Styled Components, Emotion, או CSS Modules יכולים ליצור שמות קלאס ייחודיים, ולהבטיח שסגנונות המודאל שלכם לא יתנגשו עם חלקים אחרים באפליקציה, למרות שהם מרונדרים גלובלית.
• ערכות נושא (Theming): כפי שצוין עם Context API, ודאו שפתרון ערכות הנושא שלכם (בין אם זה משתני CSS, ערכות נושא של CSS-in-JS, או ערכות נושא מבוססות קונטקסט) מופץ כראוי לילדי הפורטל.

5. שיקולי רינדור בצד השרת (SSR)

אם האפליקציה שלכם משתמשת ברינדור בצד השרת (SSR), עליכם להיות מודעים לאופן שבו פורטלים מתנהגים.

• `ReactDOM.createPortal` דורש אלמנט DOM כארגומנט ה-`container` שלו. בסביבת SSR, הרינדור הראשוני מתרחש בשרת שבו אין DOM של דפדפן.
• זה אומר שפורטלים בדרך כלל לא ירונדרו בשרת. הם יעברו "הידרציה" או ירונדרו רק לאחר שה-JavaScript ירוץ בצד הלקוח.
• עבור תוכן ש*חייב* להיות נוכח ברינדור השרת הראשוני (למשל, עבור SEO או ביצועי first-paint קריטיים), פורטלים אינם מתאימים. עם זאת, עבור אלמנטים אינטראקטיביים כמו מודאלים, שבדרך כלל מוסתרים עד שפעולה מפעילה אותם, זו לעיתים רחוקות בעיה. ודאו שהקומפוננטות שלכם מטפלות בחן בהיעדר ה-`container` של הפורטל בשרת על ידי בדיקת קיומו (למשל, `document.getElementById('modal-root')`).

6. בדיקת קומפוננטות המשתמשות בפורטלים

בדיקת קומפוננטות המרונדרות דרך פורטלים יכולה להיות מעט שונה אך נתמכת היטב על ידי ספריות בדיקה פופולריות כמו React Testing Library.

• React Testing Library: ספרייה זו מבצעת שאילתות על `document.body` כברירת מחדל, שזה המקום שבו תוכן הפורטל שלכם כנראה יתקיים. לכן, ביצוע שאילתות על אלמנטים בתוך המודאל או הטולטיפ שלכם לרוב פשוט "יעבוד".
• Mocking: בתרחישים מורכבים מסוימים, או אם לוגיקת הפורטל שלכם משולבת היטב עם מבני DOM ספציפיים, ייתכן שתצטרכו לבצע mock או להגדיר בזהירות את אלמנט ה-`container` היעד בסביבת הבדיקות שלכם.

מלכודות נפוצות ושיטות עבודה מומלצות עבור React Portals

כדי להבטיח שהשימוש שלכם ב-React Portals יהיה יעיל, ניתן לתחזוקה ובעל ביצועים טובים, שקלו את השיטות המומלצות הבאות והימנעו מטעויות נפוצות:

1. אל תשתמשו בפורטלים יתר על המידה

פורטלים הם רבי עוצמה, אך יש להשתמש בהם בשיקול דעת. אם ניתן להשיג את הפלט החזותי של קומפוננטה מבלי לשבור את היררכיית ה-DOM (למשל, באמצעות מיקום יחסי או אבסולוטי בתוך הורה שאינו גולש), עשו זאת. הסתמכות יתר על פורטלים עלולה לעיתים לסבך את ניפוי הבאגים של מבנה ה-DOM אם לא מנוהלת בקפידה.

2. ודאו ניקוי נכון (Unmounting)

אם אתם יוצרים באופן דינמי צומת DOM עבור הפורטל שלכם (כמו בדוגמת ה-`Modal` שלנו עם `el.current`), ודאו שאתם מנקים אותו כאשר הקומפוננטה המשתמשת בפורטל עוברת unmount. פונקציית הניקוי של `useEffect` מושלמת לכך, ומונעת דליפות זיכרון ועומס ב-DOM עם אלמנטים יתומים.

            
useEffect(() => {
  // ... append el.current
  return () => {
    // ... remove el.current;
  };
}, []);

            

              
                Copy
              
            
          

אם אתם תמיד מרנדרים לתוך צומת DOM קבוע וקיים מראש (כמו `modal-root` יחיד), אין צורך בניקוי של ה*צומת עצמו*, אך React עדיין מטפל אוטומטית בכך ש*תוכן הפורטל* יעבור unmount כראוי כאשר קומפוננטת האב עוברת unmount.

3. שיקולי ביצועים

עבור רוב מקרי השימוש (מודאלים, טולטיפים), לפורטלים יש השפעת ביצועים זניחה. עם זאת, אם אתם מרנדרים קומפוננטה גדולה במיוחד או שמתעדכנת בתדירות גבוהה דרך פורטל, שקלו את אופטימיזציות הביצועים הרגילות של React (למשל, `React.memo`, `useCallback`, `useMemo`) כפי שהייתם עושים עבור כל קומפוננטה מורכבת אחרת.

4. תמיד תעדיפו נגישות

כפי שהודגש, נגישות היא קריטית. ודאו שהתוכן המרונדר בפורטל שלכם עוקב אחר הנחיות ARIA ומספק חוויה חלקה לכל המשתמשים, במיוחד אלה המסתמכים על ניווט במקלדת או קוראי מסך.

• לכידת פוקוס במודאל: ישמו או השתמשו בספרייה שלוכדת את פוקוס המקלדת בתוך המודאל הפתוח.
• תכונות ARIA תיאוריות: השתמשו ב-`aria-labelledby`, `aria-describedby` כדי לקשר את תוכן המודאל לכותרת ולתיאור שלו.
• סגירה במקלדת: אפשרו סגירה עם מקש `Esc`.
• שחזור פוקוס: כאשר המודאל נסגר, החזירו את הפוקוס לאלמנט שפתח אותו.

5. השתמשו ב-HTML סמנטי בתוך פורטלים

בעוד שהפורטל מאפשר לכם לרנדר תוכן בכל מקום חזותית, זכרו להשתמש באלמנטים של HTML סמנטי בתוך ילדי הפורטל שלכם. לדוגמה, דיאלוג צריך להשתמש באלמנט `

            
// Example of a simple PortalWrapper
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // if element does not exist with wrapperId, create and append it to body
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Delete the programatically created element
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;

            

              
                Copy